<template>
    <div id="map" :className="className" :style="{height:height,width:width}"   />
</template>

<script>
  import echarts from 'echarts';
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize';
  import {mapData} from "@/assets/mapData.js"

  export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'cmap'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '620px'
        },
    },
    data() {
        return {
            cmap: {},
        }
    },
    mounted() {
        this.$nextTick(()=>{
             this.initCmap()
        })
           

    },
    methods: {
        initCmap() {          
            echarts.registerMap("chinaMap",mapData); //使用registerMap注册的地图名称

            this.cmap=echarts.init(this.$el,"macarons")
            let dataList = [
                    {name:'北京',value:[116.4,39.9,15]},{name:'上海',value:[121.4,31.2,30]},{name:'天津',value:[117.2,39.1,12]},
                    {name:'重庆',value:[106.5,29.5,50]},{name:'香港',value:[114.1,22.3,1]},{name:'澳门',value:[113.5,22.2,2]},
                    {name:'河北',value:[114.5,38.1,8]},{name:'山西',value:[112.5,37.8,48]},{name:'辽宁',value:[123.4,41.7,60]},
                    {name:'吉林',value:[125.3,43.8,80]},{name:'黑龙江',value:[126.6,45.7,40]},{name:'江苏',value:[118.7,32.0,100]},
                    {name:'浙江',value:[120.1,30.2,150]},{name:'安徽',value:[117.2,31.8,75]},{name:'福建',value:[119.3,26.0,150]},
                    {name:'江西',value:[115.8,28.6,200]},{name:'山东',value:[117.0,36.6,68]},{name:'河南',value:[113.6,34.7,59]},
                    {name:'湖北',value:[114.3,30.5,112]},{name:'湖南',value:[112.9,28.2,326]},{name:'广东',value:[113.2,23.1,421]},
                    {name:'海南',value:[110.3,20.0,210]},{name:'四川',value:[104.0,30.6,123]},{name:'贵州',value:[106.7,26.5,56]},
                    {name:'云南',value:[102.7,25.0,52]},{name:'陕西',value:[108.9,24.2,45]},{name:'甘肃',value:[109.8,36.0,15]},
                    {name:'青海',value:[101.7,36.6,53]},{name:'台湾',value:[121.5,25.0,3]},{name:'内蒙古',value:[111.6,40.8,52]},
                    {name:'广西',value:[108.3,22.8,150]},{name:'西藏',value:[91.1,29.6,12]},{name:'宁夏',value:[106.2,38.4,8]},
                    {name:'新疆',value:[87.6,43.7,9]}
            ];
            // let dataList = [
            //         {name:'北京',value:15},{name:'上海',value:30},{name:'天津',value:12},
            //         {name:'重庆',value:50},{name:'香港',value:1},{name:'澳门',value:0},
            //         {name:'河北',value:8},{name:'山西',value:48},{name:'辽宁',value:60},
            //         {name:'吉林',value:80},{name:'黑龙江',value:40},{name:'江苏',value:100},
            //         {name:'浙江',value:150},{name:'安徽',value:75},{name:'福建',value:123},
            //         {name:'江西',value:200},{name:'山东',value:68},{name:'河南',value:59},
            //         {name:'湖北',value:112},{name:'湖南',value:325},{name:'广东',value:421},
            //         {name:'海南',value:210},{name:'四川',value:123},{name:'贵州',value:56},
            //         {name:'云南',value:52},{name:'陕西',value:45},{name:'甘肃',value:87},
            //         {name:'青海',value:53},{name:'台湾',value:3},{name:'内蒙古',value:52},
            //         {name:'广西',value:150},{name:'西藏',value:25},{name:'宁夏',value:254},
            //         {name:'新疆',value:6},
            // ];
            dataList.sort(function (a, b) {
                 return a.value - b.value;
            });

            var mapOption = {
                title:{
                    text:"新生分布",
                    left:"center",
                    top:150,
                    textStyle:{
                        color:"#fff",
                        fontsize:30,
                        textShadowBlur:10,
                        textShadowColor:"#33ffff",
                    }
                },
                tooltip:{
                    trigger:"item",
                    // triggerOn:"click",
                    backgroundColor:"rgba(50,50,50,0.9)",
                    borderWidth:0,
                    extraCssText: 'white-space: initial;max-height: 200px;overflow: auto;pointer-events: initial;',
                    textStyle: {
                        color: '#fff'
                    },
                    formatter:function(e,t,n){
                        return e.name+"<br />"+e.seriesName+": "+e.value[2];
                    },
                },
                geo:{
                    map:"chinaMap",
                    roam: false,//不开启缩放和平移
                    zoom:1.2,//视角缩放比例
                    left:'center',
                    top:150,
                    itemStyle:{
                        areaColor:"#0099ff",//内容填充色
                        borderColor:"#00ffff",//区域边框色
                        shadowColor:"rgba(230,130,70,0.5)",//阴影
                        shadowBlur:30, //阴影模糊度
                        emphasis:{
                            focus:"self",
                        }
                    },
                },
                series:[{
                    name:"新生数",
                    type:"effectScatter",//涟漪特效
                    itemStyle:{
                        color:"red"
                    },
                    coordinateSystem:"geo",
                    data:dataList,
                }],
                visualMap: {
                    left: 'right',
                    bottom:'5%',
                    min: 0,
                    max: 500,
                    // type:"continumous",
                    textStyle:{
                        color:"#fff",
                    },
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    text: ['High', 'Low'],
                    testStyle:{
                        color:"#fff",
                    },
                    calculable: true //滑动效果
                },
            };
            var barOption = {
                title:{
                    text:"新生分布图",
                    left:"center",
                    textStyle:{
                        color:"#fff",
                        fontsize:30
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLabel:{
                        color:"#fff"
                    }
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        rotate: 30,
                        color:"#fff"
                    },
                    data: dataList.map(function (item) {
                        return item.name;
                    })
                },
                animationDurationUpdate: 1000,
                series: {
                    type: 'bar',
                    id: 'population',
                    data: dataList.map(function (item) {
                        return item.value;
                    }),
                    universalTransition: true
                }
            };
            // let currentOption = mapOption;
            this.cmap.setOption(mapOption);
            // setInterval(() => {
            //     currentOption = currentOption === mapOption ? barOption : mapOption;
            //     mapChart.setOption(currentOption, true);
            // },5000);
            window.addEventListener('resize',()=>{
                this.cmap.resize();
            })
        },
    },
  }
</script>
<style scoped>
#map{
    /* background: #020933; */
    /* position: absolute; */
    box-sizing: border-boxs;
}
</style>